<template>
  <div class="register">
    <p>注册</p>
    <div class="detail">
      <input type="text" placeholder="请输入手机号" v-model.trim="phone" />
      <div class="yzm">
        <input type="number" placeholder="请输入验证码" />
        <p class="yan">
          <button class="button" @click.prevent="yan()">获取验证码</button>
        </p>
      </div>
      <input type="text" placeholder="请输入密码" v-model.trim="password" />
      <input type="text" placeholder="请输入邀请码(非必填)" />
    </div>
    <button type="button" class="green" @click="goLogin">确认注册</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { posthttp } from "../../utils/request";
import { showToast, showSuccessToast } from "vant";
const router = useRouter();


const phone = ref(""); //手机号
const password = ref("");
const goLogin = () => {
  if (phone.value == "") {
    showToast("手机号不能为空");
  }
  if (password.value == "") {
    showToast("密码不能为空");
  }
  posthttp("/api/reg", {
    phone: phone.value,
    password: password.value,
  }).then((res: any) => {
    console.log(res);
    if (res.status == 200) {
      // router.push("/login");
      showSuccessToast("注册成功");
      router.push("/login");
    }
  });
};

const yan = () => {
  if (phone.value === "") {
    showToast("手机号不能为空");
    return;
  }
  // 模拟发送验证码请求
  posthttp("/api/sendVerificationCode", { phone: phone.value }).then((res: any) => {
    if (res.status === 200) {
      showToast("验证码已发送");
    } else {
      showToast("验证码发送失败");
    }
  });
};
</script>


<style lang="less" scoped>
@import url(../../assets/css/coom.css);

.register {
  background-color: rgb(246, 246, 246);
  height: 100%;
  padding: 20px 40px;
}

p {
  font-size: 40px;
  font-weight: 700;
}

.yan {
  margin-left: 40px;
  margin-top: -50px;
  font-size: 40px;
}

input,
button {
  background-color: rgb(246, 246, 246);
  margin-top: 50px;
  height: 80px;
  line-height: 80px;
  width: 90%;
  border: 0;
  outline: none;
  font-size: 20px;
  margin-left: 40px;
}

input {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 30px;
}

.green {
  background-color: rgb(0, 162, 153);
  color: #fff;
  border-radius: 40px;
  margin-top: 80px;
}

.yzm {
  position: relative;
  z-index: 2;
}

.yzm p {
  display: inline-block;
  width: 140px;
  height: 20px;
  position: absolute;
  font-size: 16px;
  bottom: 20px;
  right: 100px;
}

.yan button {
  margin-top: -120px;
  margin-left: 100px;
  width: 100px;
  height: 20px;
}
</style>